<template>
  <information-circle-icon
    v-if="status === 'info'"
    class="h-6 w-6 text-blue-400"
    aria-hidden="true"
  />
  <face-smile-icon
    v-else-if="status === 'success'"
    class="h-6 w-6 text-green-400"
    aria-hidden="true"
  />
  <exclamation-circle-icon
    v-else-if="status === 'warning'"
    class="h-6 w-6 text-yellow-400"
    aria-hidden="true"
  />
  <face-frown-icon
    v-else-if="status === 'danger'"
    class="h-6 w-6 text-red-500"
    aria-hidden="true"
  />
  <minus-circle-icon v-else class="h-6 w-6" aria-hidden="true" />
</template>

<script setup lang="ts">
import {
  FaceSmileIcon,
  ExclamationCircleIcon,
  FaceFrownIcon,
  InformationCircleIcon,
  MinusCircleIcon,
} from '@heroicons/vue/24/outline';

defineProps<{ status: string }>();
</script>

<style lang="scss"></style>
